<template lang="html">
  <div class="detail">
    <img v-lazy="goods.courseImage" class="title">
    <div class="tabbar">
      <div class="l" :class="{select:isL}" @click="Switch">介绍</div>
      <div class="r" :class="{select:!isL}" @click="Switch">课程</div>
    </div>
    <div v-if="isL">
      <div>
        <div class="message">
          <h2 class="classtitle">{{ goods.courseName }}</h2>
          <p class="normal">{{ goods.payCount }}人学过</p>
          <p class="normal">{{ goods.classState }}</p>
          <p class="money">￥{{ goods.realPrice }}</p>
        </div>
        <div class="line"></div>
        <div class="border flex" @click="gotoTeacher(teacher.id)">
          <h1 class="h1">讲师</h1>
          <img class="avatar" :src="teacher.teacherPicture" alt="">
          <div>
            <p class="name">{{ teacher.teacherName }}</p>
            <p>{{ teacher.teacherIntroduction }}</p>
          </div>
        </div>
        <div class="line"></div>
        <div class="border">
          <h1 class="h1">课程简介</h1>
          <p>{{ goods.courseIntroduction }}</p>
        </div>
        <div v-for="p in ps">
          <img class="photo" v-lazy="p.fileUrl" alt="">
        </div>
      </div>
    </div>
    <div v-if="!isL">
      <ul>
        <li v-for="(video, index) in videoList" class="list-cell" @click="openVideo(index)">
          <p class="icon">视频</p>
          <p >{{ index+1 }}. {{ video.fileName }}</p>
        </li>
      </ul>

    </div>
    <mt-popup
      v-model="popupVisible"
      >

      <video id="player1"
          controls
          :src="videoUrl"
          style="max-width: 90vw; max-height: 90vh;"
          controlslist="nodownload"
        >
        </video>

    </mt-popup>
    <v-baseline/>
    <v-footer :isPay="isPay" :userId="userId" :infoId="infoId"/>
  </div>
</template>

<script>
import { Lazyload } from 'mint-ui';
import { Toast } from 'mint-ui';

import Chose from '@/components/detail/chose.vue'
import Content from '@/components/detail/content.vue'
import Footer from '@/components/detail/footer.vue'
import Baseline from '@/common/_baseline.vue'
export default {
  components:{
    'v-footer':Footer,
    'v-baseline':Baseline,
  },
  data(){
      return {
        goods:{},
        teacher:{},
        videoList:[],
        ps:[],
        isL:true,
        popupVisible:false,
        isPay:false,
        url:"http://47.97.101.251:8886",
        videoUrl:"",
        userId:0,
        infoId:0,
      }
  },

  beforeCreate(){
    if(!localStorage.getItem("detail")){
      this.$router.push({path:`/`})
      return;
    }
    if(!sessionStorage.getItem("userInfo") || sessionStorage.getItem("userInfo") == "undefined"){
      sessionStorage.clear()
      this.$router.push({path:`/`})
      return;
    }

  },

  created(){
    let userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    userInfo = userInfo.data
    this.userId = userInfo.id
    console.log("UserId"+this.userId)

    this.goods = JSON.parse(localStorage.getItem("detail"))
    //this.ps = this.goods.photo.split(",")
    /*this.$api({
      url:"/open/queryPay/"+ phone + "/" +this.goods.id,
      method:"get",
      }).then(res=>{
        this.isPay = res.data.data.pay
    })*/
    //$('#video1').bind('contextmenu',function() { return false; });
    //document.querySelector('#video1').bind('contextmenu',function() { return false; });

    this.infoId = this.goods.id
    this.$api({
      url:"/orderInfo/getOrderInfo",
      data:{
        infoId:this.infoId,
        userId:this.userId
      },
      method:"post",
      }).then(res=>{
        console.log(res.data.data)
        this.isPay = res.data.data
    })
    this.$api({
      url:"/courseTeacher/"+this.goods.teacherId,
      method:"get",
    }).then(res=>{
      this.teacher = res.data.data
      console.log(res.data.data)
    })
    this.$api({
      url:"/courseInfo/"+this.goods.id,
      method:"get",
    }).then(res=>{

      console.log(res.data.data)
      this.ps = res.data.data.imageList
      res.data.data.videoList.sort((a,b)=>{
        return a.infoId - b.infoId
      })
      this.videoList = res.data.data.videoList
    })
  },

  methods: {
    Switch(){
      this.isL = !this.isL
    },
    openVideo(id){
      if(!this.isPay){
        Toast("请先购买课程")
        return;
      }
      let i = this.videoList[id]
      this.videoUrl = i.fileUrl;
      this.popupVisible = true;
    },
    gotoTeacher(id){
      this.$router.push({path:`/teacher/${id}`})
    }
  },
}
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  padding-bottom: 14vw;
  .title{
    height: 300px;
    width: 100%;
    object-fit: cover;
  }
  .tabbar{
    border-bottom: 1px solid rgba(68, 68, 68, 0.116);
    display:flex;
    justify-content: space-around;
    div{
      text-align: center;
      padding: 18px 15vw;
      font-size: 24px;
    }

    .select{
      color: #FFC000;
    }

    .select::after{
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      margin-top: 4px;
      background-color: #FFC000;
    }
  }
  .photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .line{
    height: 20px;
    background-color: rgba(68, 68, 68, 0.116);
  }

  .message{
    margin: 14px;

    p{
      margin: 6px 0;
    }

    .classtitle
    {
      color: black;
      font-size: 32px;
      font-weight: bold;
    }
    .normal{
      font-size: 18px;
    }
    .money{
      font-size: 22px;
      font-weight: bold;
      color: #ff1100;
    }
  }
  .border{
    margin: 12px 20px;
    .h1{
      color: black;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .avatar{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
  }

  .flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .h1{
      flex: 1;
      flex-basis: 100%;
    }
    p{
      color: black;
      font-size: 18px;
    }
    a:has(.more){
      color: #8b8b8b;
      font-size: 18px;
      text-align: end;
      flex: 1;
      cursor: pointer;
    }
    .more{
      color: #8b8b8b;
    }
  }
  .list-cell{
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 80px;
    border-bottom: 1px solid rgba(68, 68, 68, 0.116);
    cursor: pointer;
    p{
      font-size: 24px;
    }
    .icon{
      border-radius: 8px;
      border:1px solid #8b8b8b;
      color: #8b8b8b;
      text-align: center;
      line-height: 30px;
      margin-right: 12px;
      padding: 0 10px;
      font-size: 16px;
    }
  }

}
</style>
